<template>
  <h1>person: {{ person }}</h1>
  <h1 v-show="name">姓名:{{ name }}</h1>
  <br />
  <h1 v-show="person.sex">性别:{{ person.sex }}</h1>
  <br />
  <h1 v-show="age">年龄:{{ age }}</h1>
  <br />
  <h1 v-show="job.salary">薪资:{{ job.salary }}K</h1>
  <br />
  <button @click="name += '~'">姓名修改</button>
  <button @click="age++">年龄增加</button>
  <button @click="job.salary++">薪资++</button>
  <button @click="addSex">添加性别</button>
  <button @click="changeSex">改变性别</button>
  <hr>
  <button @click="changeRowPerson">改变rowPerson</button>
</template>

<script>
import { reactive, toRefs, toRaw, markRaw } from "vue";
export default {
  name: "Demo",
  setup() {
    // 数据
    let person = reactive({
      name: "Shier",
      age: 19,
      job: {
        job1: "全栈",
        salary: 88,
      },
    });
    function changeRowPerson() {
      let p = toRaw(person)
      p.age++
      console.log(p);
    }
    function addSex() {
      person.sex = markRaw({ a: 1, b: 2 })
    }
    function changeSex() {
      person.sex.a += 2
      console.log(person.sex);
    }

    // 返回一个对象（常用）
    return {
      person,
      ...toRefs(person),
      changeRowPerson,
      addSex,
      changeSex
    };
  },
};
</script>

<style>
</style>
